[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Component from "../clone-screenshot-button" export default function Page() { return } [V0_FILE]typescriptreact:file="clone-screenshot-button.tsx" isEdit="true" isMerged="true" import { Camera } from "lucide-react" import { Button } from "@/components/ui/button" import { SpotlightBorder } from "@/components/spotlight-border" export default function Component() { return (

) } [V0_FILE]typescriptreact:file="components/core/spotlight.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useState, useCallback, useEffect } from "react" import { motion, useSpring, useTransform, type SpringOptions } from "motion/react" import { cn } from "@/lib/utils" export type SpotlightProps = { className?: string size?: number springOptions?: SpringOptions } export function Spotlight({ className, size = 200, springOptions = { bounce: 0 } }: SpotlightProps) { const containerRef = useRef(null) const [isHovered, setIsHovered] = useState(false) const [parentElement, setParentElement] = useState(null) const mouseX = useSpring(0, springOptions) const mouseY = useSpring(0, springOptions) const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`) const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`) useEffect(() => { if (containerRef.current) { const parent = containerRef.current.parentElement if (parent) { parent.style.position = "relative" parent.style.overflow = "hidden" setParentElement(parent) } } }, []) const handleMouseMove = useCallback( (event: MouseEvent) => { if (!parentElement) return const { left, top } = parentElement.getBoundingClientRect() mouseX.set(event.clientX - left) mouseY.set(event.clientY - top) }, [mouseX, mouseY, parentElement], ) useEffect(() => { if (!parentElement) return const abortController = new AbortController() parentElement.addEventListener("mousemove", handleMouseMove, { signal: abortController.signal, }) parentElement.addEventListener("mouseenter", () => setIsHovered(true), { signal: abortController.signal, }) parentElement.addEventListener("mouseleave", () => setIsHovered(false), { signal: abortController.signal, }) return () => { abortController.abort() } }, [parentElement, handleMouseMove]) return ( ) } [V0_FILE]typescriptreact:file="components/spotlight-border.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { Spotlight } from "@/components/core/spotlight" export function SpotlightBorder({ children }: { children: React.ReactNode }) { return (

{children}

) }

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This